<template>
  <el-card shadow="never" class="!border-none">
    <el-page-header
      :content="id ? '编辑师傅' : '新增师傅'"
      @back="$router.back()"
    />
  </el-card>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
    <el-card shadow="never" style="margin-top: 15px" class="!border-none">
      <!-- 用户绑定 -->
      <el-form-item label="绑定用户:" prop="userId">
        <user-select
          btn-text="选择用户"
          type="primary"
          v-model="formData.userId"
          :userVo="formData.userVo"
          :id="id"
        />
      </el-form-item>
      <el-form-item label="师傅名称:" prop="name">
        <el-input
          class="w-56 ls-input"
          v-model="formData.name"
          placeholder="请输入师傅的真实姓名"
        />
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio v-model="formData.sex" name="1" :label="1">男</el-radio>
        <el-radio v-model="formData.sex" name="2" :label="2">女</el-radio>
      </el-form-item>
      <!-- 服务项目 -->
      <div class="serviceItem">
        <el-form-item label="服务项目:" prop="goodsIds">
          <service-select
            v-model="formData.goodsIds"
            v-model:selectData="formData.goodsList"
            v-perms="['goods:list']"
          >
            <template #popup>
              <el-button type="primary">选择服务</el-button>
            </template>
          </service-select>
        </el-form-item>
      </div>
      <!-- 手机号码 -->
      <el-form-item label="手机号码:" prop="mobile">
        <el-input
          class="w-56 ls-input"
          v-model="formData.mobile"
          placeholder="请输入手机号码"
        />
      </el-form-item>
      <!-- 所在地区 -->
      <el-form-item label="所在地区:" prop="districtId">
        <area-select
          class="w-56 ls-input"
          v-model:province="formData.provinceId"
          v-model:city="formData.cityId"
          v-model:district="formData.districtId"
        />
      </el-form-item>
      <el-form-item label="详细地址:">
        <el-input
          class="ls-input"
          type="textarea"
          v-model="formData.address"
          placeholder="选填，请输入详细地址"
          :rows="6"
        ></el-input>
      </el-form-item>

      <el-form-item label="状态:" prop="status">
        <el-switch
          v-model="formData.status"
          :active-text="formData.status ? '启用' : '停用'"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
        <el-form-item label="师傅类型:">
            <el-radio v-model="formData.type" name="0" :label="0"
            >普通师傅</el-radio
            >
            <el-radio v-model="formData.type" name="1" :label="1"
            >保姆师傅</el-radio
            >
        </el-form-item>

      <el-form-item label="师傅等级:">
        <el-radio v-model="formData.level" name="p1" label="p1">一级</el-radio>
        <el-radio v-model="formData.level" name="p2" label="p2">二级</el-radio>
        <el-radio v-model="formData.level" name="p3" label="p3">三级</el-radio>
      </el-form-item>
      <el-form-item label="是否兼职:">
        <el-radio v-model="formData.isFreelance" name="1" :label="1"
          >兼职</el-radio
        >
        <el-radio v-model="formData.isFreelance" name="0" :label="0"
          >全职</el-radio
        >
      </el-form-item>
      <el-form-item label="首页推荐:">
        <el-radio v-model="formData.isRecommend" name="1" :label="1"
          >推荐</el-radio
        >
        <el-radio v-model="formData.isRecommend" name="0" :label="0"
          >不推荐</el-radio
        >
      </el-form-item>
    </el-card>
  </el-form>
  <footer-btns>
    <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
  </footer-btns>
</template>

<script lang="ts" setup>
import {
  apiMasterWorkerAdd,
  apiMasterWorkerEdit,
  apiMasterWorkerDetail,
} from "@/api/master_worker";
import { ref, reactive } from "vue";
import FooterBtns from "@/components/footer-btns/index.vue";
import UserSelect from "@/components/user-select/index.vue";
import AreaSelect from "@/components/area-select/index.vue";
import ServiceSelect from "@/components/service-select/index.vue";
import type { ElForm } from "element-plus";
import feedback from "@/utils/feedback";

/** Interface Start **/
interface formDataObj {
  userId?: number | string; //用户id
  user?: object; //用户id
  name?: string; //师傅姓名
  sn?: string; //师傅姓名
  sex?: number | string; //性别
  mobile?: number | string; //手机号码
  goods?: any; //服务项目
  goodsIds: Array<any>; //服务项目
  goodsList: any;
  provinceId: number | string; //省
  cityId: number | string; //市
  districtId: number | string; //区
  address: string; //详细地址
  longitude: string; //经度
  latitude: string; //纬度
  status: number; //状态
  isRecommend?: number; //是否推荐
  level?: string; //师傅等级
  isFreelance?: number; //是否推荐
  type?: number;// 师傅类型
}
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
/** Interface End **/

/** Data Start **/
const route = useRoute();
const router = useRouter();
const id: any = route.query.id;
const formData = ref<formDataObj>({
  userId: "", //用户id
  name: "", //师傅姓名
  sn: "", // 师傅编号
  sex: 1, //性别
  mobile: "", //手机号码
  goodsIds: [], //服务项目
  goodsList: [],
  goods: [],
  provinceId: "", //省
  cityId: "", //市
  districtId: "", //区
  address: "", //详细地址
  longitude: "111", //经度 暂时不用
  latitude: "111", //纬度  暂时不用
  status: 0, //状态
  isRecommend: 0, //是否推荐
  level: "p1", //是否推荐
  isFreelance: 0, //是否推荐
  type: 0, // 师傅类型
});
// 表单校验规则
const rules = reactive<object>({
  userId: [{ required: true, message: "请选择用户", trigger: [] }],
  name: [{ required: true, message: "请输入师傅名称", trigger: "blur" }],
  sn: [{ required: true, message: "请输入师傅编号", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: ["blur", "change"] }],
  goodsIds: [{ required: true, message: "请选择服务项目", trigger: [] }],
  mobile: [
    { required: true, message: "请输入手机号", trigger: ["blur"] },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号码输入有误",
      trigger: ["blur"],
    },
  ],
  districtId: [
    { required: true, message: "请选择地区", trigger: ["blur", "change"] },
  ],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
});
/** Data End **/

/** Methods Start **/
// 获取详情
const getMasterWorkerDetail = async (id: number): Promise<void> => {
  (formData.value as {}) = await apiMasterWorkerDetail({ id });
};
// 添加师傅
const handleMasterWorkerAdd = async (): Promise<void> => {
  const goodsIds = formData.value.goodsIds.join(",");
  await apiMasterWorkerAdd({ ...formData.value, goodsIds });
  router.back();
  feedback.msgSuccess("操作成功");
};
// 编辑师傅
const handleMasterWorkerEdit = async (): Promise<void> => {
  const goodsIds = formData.value.goodsIds.join(",");
  await apiMasterWorkerEdit({ ...formData.value, goodsIds });
  router.back();
  feedback.msgSuccess("操作成功");
};
// 提交数据
const onSubmit = (formEl: FormInstance | undefined): void => {
  formData.value.goodsIds = formData.value.goodsList.map((item) => item.id);
  if (!formEl) return;
  formEl.validate((valid): boolean | undefined => {
    if (!valid) return false;
    if (!id) handleMasterWorkerAdd();
    else handleMasterWorkerEdit();
  });
};
/** Methods End **/

/** LifeCycle Start **/
// 请求详情 => 如果是编辑的话
if (id) getMasterWorkerDetail(id);
/** LifeCycle End **/
</script>

<style lang="scss" scoped>
.ls-input,
.select {
  width: 340px;
}
.serviceItem :deep() .el-form-item__content {
  display: block;
}
.serviceItem :deep() .dialog__trigger {
  width: 80px;
}
</style>
